<template>
	<view class="">
		<!-- <u-cell-item :title="userInfo.mobile?'修改手机号':'绑定手机号'" class="blue" :value="tel" @click="gophone"></u-cell-item> -->
		<!-- <u-cell-item title="修改登录密码" value="去修改" @click="gopwd" class="blue"></u-cell-item> -->
		<u-cell-item title="微信绑定" @click="wxLogin" :arrow="false">
			<view slot="right-icon" class="flex">
				<view class="yellow size-26">
					{{!userInfo.wechat || !userInfo.wechat.wechat_applet ? '未绑定' : '已绑定'}}
				</view>
				<u-icon name="arrow-right" color="#969799" class="ml-10"></u-icon>
			</view>
		</u-cell-item>
		<u-cell-item title="关于我们" @click="goDetails(4, '关于我们')"></u-cell-item>
		<view class="fixed-bottom pb-80">
			<u-button type="warning" @click="exit">退出登录</u-button>
		</view>
		<u-modal v-model="show" content="确定解除微信绑定？" :show-cancel-button="true" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				show: false
			}
		},
		computed: {
			...mapState(['userInfo']),
			tel() {
				return this.userInfo.mobile ? this.userInfo.mobile : '未绑定'
			}
		},
		onLoad() {
			this.$store.dispatch('updateUserInfo')
		},
		methods: {
			gophone() { //修改手机号
				if (this.userInfo.mobile) {
					uni.navigateTo({
						url: '/pages/my/set/phone-change'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/phone?type=1'
					})
				}
			},
			gopwd() { //修改密码
				uni.navigateTo({
					url: '/pages/login/forget-pwd?type=2'
				})
			},
			goDetails(id, title) {
				uni.navigateTo({
					url: '/pages/my/set/detail?id=' + id + '&title=' + title
				})
			},
			exit() {
				this.$http('/api/user/logout', {}, "POST").then(data => {
					this.$store.commit('exitLogin')
					uni.navigateBack({})
					setTimeout(() => {
						uni.showToast({
							title: '退出成功'
						})
					}, 100)
				})
			},
			wxLogin() {
				if (!this.userInfo.wechat || !this.userInfo.wechat.wechat_applet) {
					let _this = this;
					uni.showLoading({
						title: '绑定中'
					});
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							// 获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
									// #ifdef MP-WEIXIN
									_this.$http('/api/wechat/authorize', {
										code: loginRes.code,
										encryptedData: infoRes.encryptedData,
										iv: infoRes.iv
									}, "POST").then(data => {
										_this.getinfo(data.openid, data.unionid);
									})
									// #endif
									// #ifdef APP-PLUS
									_this.getinfo(infoRes.userInfo.openId, infoRes.userInfo.unionId);
									// #endif
								}
							});
						}
					});
				} else {
					uni.showToast({
						icon: 'error',
						title: '微信已绑定'
					})
				}
			},
			getinfo(openid, unionId) {
				this.$http('/api/wechat/login', {
					platform: 'wechat',
					openid: openid,
					unionid: unionId,
					// #ifdef MP-WEIXIN
					apptype: 'wechat_applet'
					// #endif
				}, "POST").then(data => {
					this.$store.dispatch('updateUserInfo')
					uni.hideLoading();
					setTimeout(() => {
						uni.showToast({
							title: '绑定成功'
						})
					}, 100);
				})
			},
			// 解除微信绑定
			confirm() {
				this.$http('/api/wx_login/untie', "POST").then(data => {
					this.$store.dispatch('updateUserInfo')
					uni.showToast({
						title: '解绑成功'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-warning-hover {
		background-color: $yellow !important;
	}

	/deep/.u-cell {
		padding: 30rpx 32rpx;
	}

	/deep/.u-cell_title {
		font-weight: 400 !important;
	}

	/deep/.blue .u-cell__value {
		color: $yellow !important;
	}
</style>
